import React, { useEffect, useState } from 'react';
import * as echarts from 'echarts';
import service from '../api';

interface Props {}

function EcharTwo(props:Props) { 

    var [ xAxis,setXAxis] = useState([])
    var [ yData,setYData] = useState([])
    var [myChart,setMyChart] = useState<{setOption:any}>({setOption:''})


    var draw = ()=>{
      myChart && myChart.setOption &&
      myChart.setOption({
        title: {
            text: '嗨购周用户注册量',
            left:'center',
            top:20
        },
        legend: {
          left:'center',
          bottom:10,
      },
        tooltip: {},
        xAxis: {
          data: xAxis
        },
        yAxis: {},
        series: [
          {
            name:'注册量',
            type: 'line',
            data: yData[0],
            symbolSize:15,  //圆点大小
            symbol:'circle', //圆点形状
            smooth:true,
            itemStyle:{
              normal:{
                shadowBlur:5, //阴影宽度
                shadowColor:'pink',   //阴影颜色
                // color:'chartreuse',   //折线颜色
                borderColor:'yellow',     //边框颜色
                borderWidth:1,   //圆点边框宽度
                lineStyle:{ width:2}  //折线宽度，颜色
            }
          }
          },
          {
            name:'访问量',
            type: 'line',
            data: yData[1],
            symbolSize:15,  //圆点大小
            symbol:'circle', //圆点形状
            smooth:true,
            itemStyle:{
              normal:{
                shadowBlur:5, //阴影宽度
                shadowColor:'pink',   //阴影颜色
                // color:'chartreuse',   //折线颜色
                borderColor:'yellow',     //边框颜色
                borderWidth:1,   //圆点边框宽度
                lineStyle:{ width:2}  //折线宽度，颜色
            }
          }
          },
          {
            name:'登录量',
            type: 'line',
            data: yData[2],
            symbolSize:15,  //圆点大小
            symbol:'circle', //圆点形状
            smooth:true,
            itemStyle:{
              normal:{
                shadowBlur:5, //阴影宽度
                shadowColor:'pink',   //阴影颜色
                // color:'chartreuse',   //折线颜色
                borderColor:'yellow',     //边框颜色
                borderWidth:1,   //圆点边框宽度
                lineStyle:{ width:2}  //折线宽度，颜色
            }
          }
          },
          {
            name:'注销量',
            type: 'line',
            data: yData[3],
            symbolSize:15,  //圆点大小
            symbol:'circle', //圆点形状
            smooth:true,
            itemStyle:{
              normal:{
                shadowBlur:5, //阴影宽度
                shadowColor:'pink',   //阴影颜色
                // color:'chartreuse',   //折线颜色
                borderColor:'yellow',     //边框颜色
                borderWidth:1,   //圆点边框宽度
                lineStyle:{ width:2}  //折线宽度，颜色
            }
          }
          }
        ] 
    });
    }

    var request_data = async () =>{
        var res = await service.data.data_kData()
        setXAxis(res.data.data.x)
        setYData(res.data.data.val)
    }

    useEffect(()=>{
      // 绘制图表
      myChart && draw();
    },[myChart,xAxis,yData])

    // 实例化echarts 
    useEffect(()=>{
      // 基于准备好的dom,初始化echarts实例
      var mc =  echarts.init(document.getElementById('echartsOne') || document.body);
      setMyChart(mc);
      // 请求数据
      request_data()
        
    },[])

    return (
        <div className='echartsOne'>
            <div id='echartsOne' style={{width:720,height:380}}></div>
        </div>
    );
}

export default EcharTwo;